<template>
  <div>
    <div class="modal" v-show="$store.state.isOpenLogin">
      <div class="modal_bg" @click="closeLogin"></div>
      <div class="modal_content">
        <img
          class="close"
          @click="closeLogin"
          src="../assets/images/login/userArrow.png"
          alt=""
        />
        <section>
          <span :class="{ active: showPhone }" @click="showPhone = true"
            >手机号登录</span
          >
          <span :class="{ active: !showPhone }" @click="wechatLoginFn"
            >微信扫码登录</span
          >
        </section>
        <div class="phoneLogin" v-show="showPhone">
          <div class="tanxin line">
            <input placeholder="请输入手机号" v-model="phone" type="text" />
          </div>
          <!-- 滑块验证码 (拼图) -->
          <div class="verify_box">
            <slide-verify
              :l="42"
              :r="10"
              :w="360"
              :h="155"
              slider-text="向右滑动"
              @success="onSuccess"
              @fail="onFail"
              @refresh="onRefresh"
            ></slide-verify>
            <div>{{ msg }}</div>
          </div>
          <div class="tanxin line">
            <input placeholder="请输入验证码" v-model="code" type="text" />
            <div class="btn" style="font-size: 12px" @click="changeYanZhenMa">
              {{ getYanZenMa }}
            </div>
          </div>

          <div class="btn_login" @click="submitFn">登录</div>
        </div>
        <!-- <div id="weixin">

      </div> -->
        <div id="weixin" v-show="!showPhone"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeApi, LoginApi } from "@/request/api";
const vaildatephone = (phone) => {
  let reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  return reg.test(phone.trim());
};

export default {
  data() {
    return {
      getYanZenMa: "获取验证码",
      phoneNumber: "",
      // 控制是微信扫码 还是 手机号
      showPhone: false,
      msg: "",
      // 手机号
      phone: "18780468082",
      // 验证码
      code: "3505",
      // 验证码的成功状态
      codeFlag: false,
      // 倒计时的数据
      count: 5,
      // 获取验证码的状态
      codeStatus: true,
    };
  },
  methods: {
    // 切换到微信登录
    wechatLoginFn() {
      this.showPhone = false;
    },
    closeLogin() {
      // 关闭模态框
      this.$store.commit("changeIsLogin", false);
    },
    onSuccess() {
      this.msg = "验证成功";
      this.codeFlag = true;
    },
    onFail() {
      this.msg = "验证失败";
      this.codeFlag = false;
    },
    onRefresh() {
      this.msg = "";
    },
    // 点击登录
    submitFn() {
      // 验证手机号格式是否正确
      let result = vaildatephone(this.phone);
      if (!result) {
        let toastObj = {
          content: "请输入正确的手机号",
          icon: "danger",
        };
        this.$store.dispatch("AsyncToast", toastObj);
        return;
      }
      //  拼图验证的if
      // if (!this.codeFlag) {
      //   let toastObj = {
      //     content: "请完成拼图再进行下一步",
      //     icon: "danger",
      //   };
      //   this.$store.dispatch("AsyncToast", toastObj);
      //   return;
      // }
      // 校验验证码是否输出的功能
      let mycode = this.code.trim();
      if (mycode == "") {
        let toastObj = {
          content: "请输入 ",
          icon: "danger",
        };
        this.$store.dispatch("AsyncToast", toastObj);
        return;
      }

      // 发送请求
      console.log("验证通过");
      LoginApi({
        verifyCode: this.code,
        phone: this.phone,
      }).then((res) => {
        // console.log(res);
        if (res.data.code === 0) {
          // 存储token
          localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
          // 提示登录成功
          let toastObj = {
            content: res.data.message,
            icon: "success",
          };
          this.$store.dispatch("AsyncToast", toastObj);
          // 关闭登录框
          this.$store.commit("changeIsLogin", false);
        }
      });
    },
    // 获取验证码
    getCodeFn() {
      // 验证手机号格式是否正确
      let result = vaildatephone(this.phone);
      if (!result) {
        let toastObj = {
          content: "请输入正确的手机号",
          icon: "danger",
        };
        this.$store.dispatch("AsyncToast", toastObj);
        return;
      }
      // 拼图验证的if
      // if (!this.codeFlag) {
      //   let toastObj = {
      //     content: "请完成拼图再进行下一步",
      //     icon: "danger",
      //   };
      //   this.$store.dispatch("AsyncToast", toastObj);
      //   return;
      // }
      // 获取了验证码  --->  倒数计时功能
      getCodeApi({
        phone: this.phone,
      }).then((res) => {
        if (res.data.code === 0) {
          let toastObj = {
            content: res.data.message,
            icon: "success",
          };
          this.$store.dispatch("AsyncToast", toastObj);
          // 显示计时器
          this.codeStatus = false;
          // 获取验证码的数据
          let timer = setInterval(() => {
            this.count--;
            if (this.count === 0) {
              // 停止计时
              clearInterval(timer);
              this.count = 5;
              // 显示 “正常按钮”
              this.codeStatus = true;
            }
          }, 1000);
        } else {
          let toastObj = {
            content: res.data.message,
            icon: "danger",
          };
          this.$store.dispatch("AsyncToast", toastObj);
        }
      });
    },
    // 发送请求
    // console.log("验证通过");
    changeYanZhenMa() {
      if (this.msg !== "验证成功") {
        alert("未验证");
        return;
      }
      let num = 59;
      let timer = setInterval(() => {
        this.getYanZenMa = num + "s后重新发送";
        num--;
        if (num === -1) {
          clearInterval(timer);
          this.getYanZenMa = "获取验证码";
        }
      }, 1000);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  .modal_bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }
  .modal_content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 555px;
    height: 423px;
    background: url(../assets/images/login/loginBg.png) no-repeat;
    .close {
      position: absolute;
      top: 20px;
      right: 60px;
    }
    .verify_box {
      width: 360px;
      margin: 0 auto 20px;
      /deep/.slide-verify {
        width: 100% !important;
        canvas {
          position: absolute;
          top: -150px;
          left: 0;
          display: none;
          box-sizing: border-box;
        }
        &:hover {
          canvas {
            display: block;
          }
        }
      }
    }
    section {
      display: flex;
      justify-content: center;
      padding-top: 50px;
      margin-bottom: 30px;
      span {
        color: #ccc;
        cursor: pointer;
        &:nth-of-type(1) {
          border-right: 1px solid #ccc;
          padding-right: 10px;
          margin-right: 10px;
        }
        &.active {
          color: #333;
        }
      }
    }
    .line {
      width: 360px;
      margin: 0 auto 20px;
      height: 50px;
      input {
        flex: 1;
        text-indent: 1em;
        outline: none;
      }
      .btn {
        width: 90px;
        height: 50px;
        text-align: center;
        background: @blue;
        color: #fff;
        cursor: pointer;
        line-height: 50px;
        margin-left: 10px;
      }
    }
    .btn_login {
      width: 360px;
      height: 50px;
      text-align: center;
      background: @blue;
      color: #fff;
      cursor: pointer;
      line-height: 50px;
      margin: auto;
    }
  }
}
#weixin {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: pink;
}
</style>